<template>
  <div class="flex items-center justify-center py-16">
    <div class="relative">
      <!-- 外圈 -->
      <div class="w-16 h-16 border-4 border-gray-600 border-t-blue-500 rounded-full animate-spin"></div>
      <!-- 内圈 -->
      <div class="absolute top-2 left-2 w-12 h-12 border-4 border-gray-700 border-t-purple-500 rounded-full animate-spin" style="animation-direction: reverse; animation-duration: 0.8s;"></div>
      <!-- 中心点 -->
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>